<template>
  <el-dialog v-loading="loading" v-model="dialogVisible" :title="预览视频" width="800" z-index=1000>

    <video ref="videoPlayer"
           width="100%"
           controls muted style="width: 100%; height: auto;">
      <source :src="filePath" type="video/mp4" />
      您的浏览器不支持 HTML5 视频。
    </video>

    <div class="center-aligned-button">
      <el-button @click="onCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, computed, watch } from "vue";
const fileServer = 'http://104.160.47.201:8040/';
const filePath = ref(null);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  param: {
    type: Object,
    default: null,
  },
});
const loading = ref(false);
const emits = defineEmits(["update:show", "refresh"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(val) {
    emits("update:show", val);
  },
});
watch(dialogVisible, (value) => {
  filePath.value = fileServer + props.param.filePath;
});
const onCancel = () => {
  emits("update:show", false);
};
</script>
<style lang="scss" scoped>
.center-aligned-button{
  display:flex;
  justify-content: center;
  align-items: center;
}
</style>